import React, { useContext, useState, useEffect, useRef } from 'react';
import {
  message,
  Form,
  Input,
  Button,
  Radio,
  InputNumber,
  Table,
  Spin,
  Popconfirm,
  Select,
  Checkbox,
  Row,
  Col,
  Space,
} from 'antd';
import { putOrUpTask, getCollectionTaskById } from '../api';
import styles from '../index.less';

const { Option } = Select;

const SetTime = props => {
  // 结构化数据
  const { visible, onCancel, onSuccess, data, type } = props;
  const [serverid, setServerid] = useState('');

  // 初始化 form
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  // 详情
  const getDetailData = () => {
    const paylaod = {
      id: data.id,
    };
    setLoading(true);
    getCollectionTaskById(paylaod).then(res => {
      setLoading(false);
      if (res.code === 0) {
        setServerid(res.data?.serverid);
        const filed = {
          workweek: res.data.workweek && res.data.workweek.split(','),
          workweek0: res.data.workweek0 && res.data.workweek0.split(','),
        };
        form.setFieldsValue({ ...res.data, ...filed });
      } else {
        message.error(res.msg || '获取详情失败');
      }
    });
  };

  // 设置当前服务器
  const setCurrentServerid = () => {
    form.setFieldsValue({ workcenterid: serverid });
  };

  useEffect(() => {
    visible === true && getDetailData();
  }, [visible]);

  // 栅格化
  const formItemLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 18 },
  };

  /**
   * @en-US save
   * @zh-CN 保存
   *
   * @param values
   */

  const save = async values => {
    setLoading(true);
    const paylaod = {
      workweek: values.workweek && values.workweek.length ? values.workweek.join(',') : '',
      workweek0: values.workweek0 && values.workweek0.length ? values.workweek0.join(',') : '',
    };
    putOrUpTask({ ...values, ...paylaod, id: data.id }).then(res => {
      setLoading(false);
      if (res.code === 0) {
        message.success(res.msg || '保存成功！');
      } else {
        message.error(res.msg || '保存失败，请重试');
      }
    });
  };

  /**
   * @en-US Update node
   * @zh-CN 更新节点
   *
   * @param values
   */
  const sendData = () => {
    form.validateFields().then(values => {
      save(values);
    });
  };

  return (
    <Spin spinning={loading}>
      <Form {...formItemLayout} name="control-ref" form={form}>
        <div>
          <Form.Item label="任务执行服务器" name="workcenterid">
            <Input
              maxLength={120}
              placeholder="请输入任务执行服务器"
              style={{ width: 400 }}
              allowClear
            />
          </Form.Item>
          <div className={styles.tipsBox} style={{ marginBottom: 20 }}>
            <Row>
              <Col span={4}> </Col>
              <Col span={18}>
                <Button type="primary" onClick={setCurrentServerid}>
                  当前服务器
                </Button>
              </Col>
            </Row>
          </div>
        </div>
        <Form.Item label="归集任务" name="workweek">
          <Checkbox.Group style={{ width: '100%' }}>
            <Row>
              <Col span={3}>
                <Checkbox value="1" style={{ lineHeight: '32px' }}>
                  星期一
                </Checkbox>
              </Col>
              <Col span={3}>
                <Checkbox value="2" style={{ lineHeight: '32px' }}>
                  星期二
                </Checkbox>
              </Col>
              <Col span={3}>
                <Checkbox value="3" style={{ lineHeight: '32px' }}>
                  星期三
                </Checkbox>
              </Col>
              <Col span={3}>
                <Checkbox value="4" style={{ lineHeight: '32px' }}>
                  星期四
                </Checkbox>
              </Col>
              <Col span={3}>
                <Checkbox value="5" style={{ lineHeight: '32px' }}>
                  星期五
                </Checkbox>
              </Col>
              <Col span={3}>
                <Checkbox value="6" style={{ lineHeight: '32px' }}>
                  星期六
                </Checkbox>
              </Col>
              <Col span={3}>
                <Checkbox value="7" style={{ lineHeight: '32px' }}>
                  星期日
                </Checkbox>
              </Col>
            </Row>
          </Checkbox.Group>
        </Form.Item>
        <Form.Item label="时间段" name="worktime">
          <Input maxLength={120} placeholder="时间段格式00:00" allowClear />
        </Form.Item>
        <Row>
          <Col span={4}> </Col>
          <Col span={18}>
            <div className={styles.tipsBox}>
              <p>多个时间以分号分隔如：05:30;11:30； 也可以指定按规律重复执行如：</p>
              <p>D;03:00;18:00;10 每天3点到18点每10分钟执行一次； M;10;20;18:00;19:00</p>
              <p>每月10号到20号 在指定的时间 执行</p>
            </div>
          </Col>
        </Row>
        <Form.Item label="校准任务" name="workweek0">
          <Checkbox.Group style={{ width: '100%' }}>
            <Row>
              <Col span={3}>
                <Checkbox value="1" style={{ lineHeight: '32px' }}>
                  星期一
                </Checkbox>
              </Col>
              <Col span={3}>
                <Checkbox value="2" style={{ lineHeight: '32px' }}>
                  星期二
                </Checkbox>
              </Col>
              <Col span={3}>
                <Checkbox value="3" style={{ lineHeight: '32px' }}>
                  星期三
                </Checkbox>
              </Col>
              <Col span={3}>
                <Checkbox value="4" style={{ lineHeight: '32px' }}>
                  星期四
                </Checkbox>
              </Col>
              <Col span={3}>
                <Checkbox value="5" style={{ lineHeight: '32px' }}>
                  星期五
                </Checkbox>
              </Col>
              <Col span={3}>
                <Checkbox value="6" style={{ lineHeight: '32px' }}>
                  星期六
                </Checkbox>
              </Col>
              <Col span={3}>
                <Checkbox value="7" style={{ lineHeight: '32px' }}>
                  星期日
                </Checkbox>
              </Col>
            </Row>
          </Checkbox.Group>
        </Form.Item>
        <Form.Item label="校准任务时间段" name="worktime0">
          <Input maxLength={120} placeholder="校准任务时间段 格式 00:00" allowClear />
        </Form.Item>
        <Form.Item label="备注" name="memo">
          <Input.TextArea
            maxLength={200}
            allowClear
            placeholder="请输入备注 最多200字符"
            allowClear
          />
        </Form.Item>
      </Form>
      <div style={{ textAlign: 'center' }}>
        <Button onClick={sendData} type="primary" loading={loading} disabled={loading}>
          保存
        </Button>
      </div>
    </Spin>
  );
};

export default SetTime;
